<template>
  <div class="projInfo">
    <div class="projInfo_top">
      <topLeft />
      <topCenter />
      <topRight :dynamic="dynamic" />
    </div>
    <div class="projInfo_bottom">
      <bottomLeft :technology="technology" />
      <bottomRight :dimensional="dimensional" />
    </div>
  </div>
</template>

<script>
import topLeft from './topLeft'
import topRight from './topRight'
import topCenter from './topCenter'
import bottomLeft from './bottomLeft'
import bottomRight from './bottomRight'

import getProjInfo from '../../api/projInfo/projInfoGetData'

export default {
  components: {
    topLeft,
    topRight,
    topCenter,
    bottomLeft,
    bottomRight
  },
  data () {
    return {
      dynamic: [],
      technology: [],
      dimensional: []
    }
  },

  watch: {},

  created () {},

  mounted () {
    var that = this
    getProjInfo()
      .then(response => {
        console.log(response)
        that.dynamic = response.data.dynamic
        that.technology = response.data.technology
        that.dimensional = response.data.dimensional
      })
      .catch(function (error) {
        console.log(error)
        console.log('获取项目简介信息失败！')
      })
  },

  methods: {}
}
</script>

<style lang="less" scoped>
.projInfo {
  width: calc(100% - 40px);
  height: calc(100% - 65px);
  // background: url("../../assets/projInfo/背景.png");
  // background-size: 100% 100%;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 25px;
  pointer-events: none;
  user-select: none;
  //display: flex;
  //flex-direction: column;
  * {
    pointer-events: all;
  }

  .projInfo_top {
    width: calc(100% - 0px);
    height: 65.625%;
    // margin-top: 2px;
    // margin-left: 2px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
  }
  .projInfo_bottom {
    width: calc(100% - 0px);
    height: 34.375%;
    // margin-left: 2px;
    //  margin-bottom: 2px;
    display: flex;
    flex-direction: row;
  }
}
</style>
